<template>
    <div class="main-box">
        <div class="title">文章列表</div>
        <div class="status-bar">
            <span class="status-bar-item" style="cursor:auto;">状态</span>
            <span @click="changeState('all')" :class="['status-bar-item', { active: isActive('all') }]">全部</span>
            <span @click="changeState('public')" :class="['status-bar-item', { active: isActive('public') }]">公开</span>
            <span @click="changeState('private')" :class="['status-bar-item', { active: isActive('private') }]">私密</span>
            <span @click="changeState('draft')" :class="['status-bar-item', { active: isActive('draft') }]">草稿箱</span>
        </div>
        <div class="operation">
            <div class="operation-bar">
                <div class="left-bar">
                    <!-- <el-button type="primary">
                        <i class="iconfont icon-jiahao"></i>
                        <span>新增</span>
                    </el-button>
                    <el-button type="danger">
                        <i class="iconfont icon-jiahao"></i>
                        <span>批量删除</span>
                    </el-button> -->
                </div>
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;">
                            <el-tree-select :disabled="type == 2" v-model="queryData.data.categoryId" filterable clearable
                                check-strictly default-expand-all :data="categoryTreeSelectData" placeholder="请选择分类"
                                :props="defaultProps" :render-after-expand="false" style="width: 100%;" />
                        </el-form-item>
                        <el-form-item style="margin-right: 1em;">
                            <el-select filterable clearable v-model="queryData.data.tagId" placeholder="请选择标签">
                                <el-option v-for="tagOption in tagOptions" :label="tagOption.tagName" :value="tagOption.id"
                                    :key="tagOption.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-right: 1em;">
                            <el-input v-model="queryData.data.articleTitle" clearable style="width: 220px;"
                                placeholder="请输入文章名"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-right: 0.5em;">
                            <el-button @click="getPage" type="primary">
                                <i class="iconfont icon-sousuo"></i>
                                搜索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" @selection-change="doSelectionChange" v-loading="tableLoading" border
                style="height:100%;">

                <el-table-column label="编号" align="center" width="80">
                    <template #default="scope">
                        {{ (queryData.currPage - 1) * queryData.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column label="文章封面" align="center" width="180">
                    <template #default="scope">
                        <div class="article-cover-thumbnail">
                            <img :src="scope.row.articleCover" class="img">
                            <i class="iconfont icon-suo"></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="articleTitle" label="标题" align="center" width="240" >
                    <template #default="scope">
                        <el-tooltip placement="top" :disabled="scope.row.articleTitle.length<=50">
                            <template #content>
                                <div style="width:200px;white-space: wrap;word-break: break-all;">
                                    {{ scope.row.articleTitle }}
                                </div>
                            </template>
                            <div class="article-title" >
                                {{ scope.row.articleTitle }}
                            </div>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
                <el-table-column prop="categoryDTO.categoryName" label="分类" align="center" />
                <el-table-column align="center" label="标签" width="180">
                    <template #default="scope">
                        <div class="article-tag-wrapper">
                            <el-scrollbar>
                                <el-tag class="tag" v-for="tag in scope.row.tagDTOList" :key="tag.id">{{ tag.tagName }}</el-tag>
                            </el-scrollbar>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="publishTime" label="发表时间" align="center" width="200"/>
                <el-table-column prop="publishTime" label="置顶" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isTop" :active-value="1" :inactive-value="0"
                            @change="handleSetTop(scope.row)" active-color="#13ce66" inactive-color="#eaecf0">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button @click="$router.push({path: `/article/update/${scope.row.id}`})" type="primary" plain size="small">
                            <i class="iconfont icon-bianji mr5"></i>
                            编辑
                        </el-button>
                        <el-button type="danger" @click="delArticle(scope.row)" plain size="small">
                            <i class="iconfont icon-lajixiang mr5"></i>
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <Pagination :totalCount="totalCount" :get-page="changeCurrentPage" />

    </div>
</template>

<script>
export default {
    name: 'ArticleList'
}
</script>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { ref, reactive, onMounted, computed } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'
import { listAllTag } from '@/api/tagApi'
import { queryCategoryTreeList } from '@/api/categoryApi'
import { queryArticlePage, setArticleTop, delArticleById } from '@/api/articleApi'

// 状态
const state = ref('all')
function isActive(sta) {
    return state.value == sta
}
function changeState(sta) {
    console.log(sta);
    state.value = sta
    if (sta == 'all') {
        queryData.data.isSeen = null
        queryData.data.status = null
    } else if (sta == 'public') {
        queryData.data.isSeen = 1
        queryData.data.status = null
    } else if (sta == 'private') {
        queryData.data.isSeen = 0
        queryData.data.status = null
    } else if (sta == 'draft') {
        queryData.data.isSeen = null
        queryData.data.status = 0
    }
}

let defaultProps = {
    children: 'children',
    label: 'categoryName',
    value: 'id'
}
let categoryTreeList = ref([])
// 获取分类树列表数据
function getCategoryTreeList() {
    queryCategoryTreeList({}).then(res => {
        categoryTreeList.value = res
    })
}

// 下拉树选项
let categoryTreeSelectData = computed({
    get() {
        return [{ id: 0, categoryName: '全部分类', children: categoryTreeList.value }]
    }
})


let tagOptions = ref([])

function getAllTagList() {
    listAllTag().then(res => {
        tagOptions.value = res
    })
}



// 表格 数据
let tableData = ref([])
let totalCount = ref(100)
const queryData = reactive({
    pageSize: 10,
    currPage: 1,
    data: {
        categoryId: null,
        tagId: null,
        articleTitle: '',
        status: null,
        isSeen: null,
    }
})
// 表格加载
let tableLoading = ref(false)

// 获取分页数据
function getPage() {
    tableLoading.value = true
    queryArticlePage(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res.list
        totalCount.value = res.totalCount
    })
}

function changeCurrentPage(currPage) {
    queryData.currPage = currPage
    getPage()
}

onMounted(() => {
    getPage()
    getAllTagList()
    getCategoryTreeList()
})


// 批量操作
let selectedIds = ref([])
function doSelectionChange(selection) {
    selectedIds.value = []
    selection.forEach((row) => {
        selectedIds.value.push(row.id)
    })
}

function deleteBatch() {
    MsgBoxer.confirm('是否批量删除这 ' + selectedIds.value.length + ' 个').then(() => {
        delBatch(selectedIds.value).then(() => {
            Messager.ok('批量删除成功')
            getPage()
        })
    })
}

// 置顶
function handleSetTop(row) {
    console.log(row);
    setArticleTop({ articleId: row.id, isTop: row.isTop })
        .then(res => {
            Messager.ok('操作成功')
        })
        .catch(err => {
            row.isTop = row.isTop == 1 ? 0 : 1
        })
}

// 删除提示
function delArticle(row) {
    MsgBoxer.confirm(`确认删除该${row.articleTitle}吗?`).then(() => {
        delArticleById({articleId:row.id}).then(res => {
            Messager.ok('删除成功')
            getPage()
        })
    })
}



</script>

<style lang="scss" scoped>
.main-box {
    display: flex;
    flex-direction: column;

    .table-box {
        flex: 1;
        overflow: hidden;
    }
}

.operation-bar {
    display: flex;
}

.status-bar {
    margin: 15px 5px;
}

.status-bar-item {
    color: #999999;
    margin-right: 20px;
    cursor: pointer;
    font-size: 14px;

    &.active {
        font-weight: bold;
        color: #333333;
    }
}

.article-cover-thumbnail {
    width: 160px;
    height: 90px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #eee;

    position: relative;

    &::before {
        content:'';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        transition: all 0.5s;
    }

    &:hover::before {
        opacity: 0;
    }

    &:hover i {
        transform: translateX(50px);
    }

    i {
        position: absolute;
        color: #fff;
        font-weight: bold;
        bottom: 0px;
        right: 5px;
        font-size: 18px;
        transition: all 0.5s;
        transform: translateX(0);
    }
}

.article-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.article-tag-wrapper {
    max-height: 90px;
    overflow:auto;
}

</style>